<template>
    <div class="right-board">
    <el-tabs v-model="currentTab" class="center-tabs">
      <el-tab-pane label="配置" name="field" />
      <el-tab-pane label="数据" name="data" />
      <el-tab-pane label="参数" name="location" />
    </el-tabs>
    <div class="field-box">
      
      <el-scrollbar class="right-scrollbar">
        <!-- 组件属性 -->
        <el-form v-show="currentTab==='field'" size="small" label-width="90px">
          <el-collapse  v-model="activeNames" accordion>
            <el-collapse-item title="图层" name="1">
              <el-form-item v-if="configData.layerName!==undefined" label="图层名称">
                <el-input v-model="configData.layerName" placeholder="请输入图层名称" />
              </el-form-item>
            </el-collapse-item>

            <el-collapse-item title="超链接" name="2">
              <el-form-item v-if="configData.chartOption.href!==undefined" label="路径">
                <el-input v-model="configData.chartOption.href" placeholder="请输入路径" />
              </el-form-item>

             <el-form-item v-if="configData.chartOption.target!==undefined" label="新页面位置">
                <el-select v-model="configData.chartOption.target" placeholder="请选择">
                  <el-option
                    v-for="item in targets"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>

            <el-form-item v-if="configData.chartOption.type!==undefined" label="超链接样式">
              <el-radio-group v-model="configData.chartOption.type">
                <el-radio label="label">文本</el-radio>
                <el-radio label="img">图片</el-radio>
              </el-radio-group>
            </el-form-item>

            </el-collapse-item>

            <el-collapse-item title="文本类型" name="3">
              
              <el-form-item v-if="configData.chartOption.label.context!==undefined" label="显示文字">
                <el-input v-model="configData.chartOption.label.context" placeholder="请输入显示文字" />
              </el-form-item>

              <el-form-item v-if="configData.chartOption.label.fontSize!==undefined" label="字体大小">
                <el-slider v-model="configData.chartOption.label.fontSize" :min="1" :max="200" :step="1" show-input></el-slider>
              </el-form-item>

              <el-form-item v-if="configData.chartOption.label.fontFamily!==undefined" label="字体名称">
                <el-select v-model="configData.chartOption.label.fontFamily" placeholder="请选择">
                  <el-option
                    v-for="(item,index) in fontFamilys"
                    :key="index"
                    :label="item"
                    :value="item">
                  </el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="文字粗细">
                <el-select v-model="configData.chartOption.fontWeight" placeholder="请选择">
                  <el-option
                    v-for="(item,index) in fontWeights"
                    :key="index"
                    :label="item"
                    :value="item">
                  </el-option>
                </el-select>
              </el-form-item>

              <el-form-item v-if="configData.chartOption.label.decoration!==undefined" label="字体装饰线">
                <el-select v-model="configData.chartOption.label.decoration" placeholder="请选择">
                  <el-option value="none" label="无"></el-option>
                  <el-option value="underline" label="下划线"></el-option>
                  <el-option value="line-through" label="中划线"></el-option>
                </el-select>
              </el-form-item>

              <el-form-item v-if="configData.chartOption.label.linkColor!==undefined" label="未访问链接颜色">
                <el-color-picker v-model="configData.chartOption.label.linkColor" show-alpha></el-color-picker>
              </el-form-item>
<!-- 
              <el-form-item v-if="configData.chartOption.label.visitedColor!==undefined" label="已访问链接颜色">
                <el-color-picker v-model="configData.chartOption.label.visitedColor" show-alpha></el-color-picker>
              </el-form-item>-->

              <el-form-item v-if="configData.chartOption.label.hoverColor!==undefined" label="鼠标悬停颜色">
                <el-color-picker v-model="configData.chartOption.label.hoverColor" show-alpha></el-color-picker>
              </el-form-item>

              <!-- <el-form-item v-if="configData.chartOption.label.activeColor!==undefined" label="鼠标落下颜色">
                <el-color-picker v-model="configData.chartOption.label.activeColor" show-alpha></el-color-picker>
              </el-form-item>  -->
            

            </el-collapse-item>

            <el-collapse-item title="图片类型" name="4">

              <!-- <el-form-item v-if="configData.chartOption.img.src!==undefined" label="图片地址">
                <el-input v-model="configData.chartOption.img.src" placeholder="图片地址" />
              </el-form-item> -->

              <el-form-item v-if="configData.chartOption.img.src!==undefined" label="图片">
                <!--<el-input v-model="configData.chartOption.border" placeholder="图片地址" />-->
                <img style="width: 200px; height: 150px" :src="basePath + configData.chartOption.img.src" @click="openGallery" >
              </el-form-item>

              <el-form-item v-if="configData.chartOption.img.width!==undefined"  label="宽度">
                <el-input-number v-model="configData.chartOption.img.width" controls-position="right"  :min="1" :step="1"></el-input-number>
              </el-form-item>

              <el-form-item v-if="configData.chartOption.img.height!==undefined"  label="高度">
                <el-input-number v-model="configData.chartOption.img.height" controls-position="right" :min="1" :step="1"></el-input-number>
              </el-form-item>
              

            </el-collapse-item>          

            <el-collapse-item title="动画" name="5">

              <el-form-item v-if="configData.chartOption.animate!==undefined" label="载入动画">
                <el-select v-model="configData.chartOption.animate" placeholder="请选择">
                  <el-option
                    v-for="item in animateOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>

            </el-collapse-item>

          </el-collapse>

        </el-form>
        <!-- 表单属性 -->
        <el-form v-show="currentTab === 'data'" size="small" label-width="90px">
          <el-form-item v-if="" label="数据源类型">
            <el-select v-model="configData.chartOption.dataSourceType" placeholder="请选择">
                <el-option
                  v-for="item in dataSourceOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
          </el-form-item>

        <Databasewebsocket v-show="configData.chartOption.dataSourceType === 'websocket'" 
          :interfaceKey="configData.chartOption.interfaceKey" @getInterfaceKey="getInterfaceKey"></Databasewebsocket>
          
          <el-form-item v-show="configData.chartOption.dataSourceType === 'static'" label="静态数据值" prop="desc">
            <el-input type="textarea" :rows="20" v-model="staticDataValue"  @blur.prevent="changeStaticData()"></el-input>
          </el-form-item>

          <api-source v-show="configData.chartOption.dataSourceType === 'url'" 
            :interfaceUrl="interfaceUrl" 
            :requestMethod="configData.chartOption.requestMethod"
            :requestParameters="configData.chartOption.requestParameters"
            :token="configData.chartOption.token"
            :timeout="configData.chartOption.timeout"
            @changeApi="changeApi" ></api-source>

          <el-form-item label="通用处理" v-if="configData.chartOption.customData!==undefined">
            <el-button type="primary" @click="editData">编辑</el-button>
          </el-form-item>

        </el-form>
        <!-- 组件位置 -->
        <el-form v-show="currentTab === 'location'" size="small" label-width="90px">
          <el-form-item label="X位置">
            <el-input-number v-model="configData.x" controls-position="right"  :step="1"></el-input-number>
          </el-form-item>
          <el-form-item label="y位置">
            <el-input-number v-model="configData.y" controls-position="right" :step="1"></el-input-number>
          </el-form-item>
          <el-form-item label="宽度">
            <el-input-number v-model="configData.width" controls-position="right" :step="1"></el-input-number>
          </el-form-item>
          <el-form-item label="高度">
            <el-input-number v-model="configData.height" controls-position="right" :step="1"></el-input-number>
          </el-form-item>
        </el-form>

      </el-scrollbar>
    </div>
<!-- 图库对话框 -->
    <el-dialog title="图库" :visible.sync="open" width="1000px" hight="600px" append-to-body>
      <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
        <el-form-item label="所属模板">
        <el-input
            v-model="queryParams.viewTemplate"
            placeholder="请输入所属模板"
            clearable
            size="small"
            style="width: 240px"
            @keyup.enter.native="handleQuery"
        />
        </el-form-item>
        
        <el-form-item label="图片分类" prop="status">
        <el-select
            v-model="queryParams.sort"
            placeholder="图片分类"
            clearable
            size="small"
            style="width: 240px"
        >
            <el-option
            v-for="item in sortOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            />
        </el-select>
        </el-form-item>
        
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        </el-form-item>

    </el-form>
    <div style="overflow:auto; height:500px;">
        <ul
            class="background-images-ul"
            v-infinite-scroll="load"
            infinite-scroll-disabled="disabled">
            <!-- <li v-for="item in uploadList" @click="selectImg(basePath + item.imagePath)">
              <img :src="basePath + item.imagePath" class="border_img">
              <label>{{ item.name }}</label>
            </li> -->
            <li v-for="item in uploadList" @click="selectImg(item.imagePath)">
              <img :src="basePath + item.imagePath" class="border_img">
              <label>{{ item.name }}</label>
            </li>
        </ul>
        <p v-if="loading" style="text-align: center;">加载中...</p>
        <p v-if="noMore" style="text-align: center;">没有更多了</p>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="通用处理"
      v-if="dataOpen"
      :visible.sync="dataOpen"
      width="1000px"
      hight="900px"
      append-to-body
      :close-on-click-modal="false"
    >
      <data-editor
        :key="aceKey"
        @submitData="submitData"
        @cancelData="cancelData"
        :customData="configData.chartOption.customData==undefined?'':configData.chartOption.customData"
      ></data-editor>


    </el-dialog> 
  </div>

</template>

<script>

import {animateOptions} from '../../animate/animate'
import { listUpload, fileUpload } from "@/api/tool/datav/fileUpload";
import Interactionwebsocket from './chartDB/Interactionwebsocket'
import { dataSourceOptions, dataBaseOptions } from '../../ComponentsConfig'
import Databasewebsocket from './chartDB/Databasewebsocket'
import DataEditor from "@/views/tool/datav/components/config/runcode/DataEditor";
import ApiSource from './chartDB/ApiSource'
export default {
  components: {
    Interactionwebsocket,
    Databasewebsocket,
    DataEditor,
    ApiSource
  },
  props: ["costomData"],
  data() {
    return {
      basePath: process.env.VUE_APP_BASE_API,
      targets:[{value:'_blank',label:'新窗口'},{value:'_self',label:'相同框架'},{value:'_parent',label:'父框架集'},{value:'_top',label:'整个窗口'}],
      fontFamilys:this.fontFamilys,
      fontWeights:['normal','bold','bolder','lighter'],
      activeNames: ['1'],
      currentTab: 'field',
      configData: this.costomData,
      animateOptions,
      dataSourceOptions,
      dataBaseOptions,
      staticDataValue: this.costomData != null ? this.costomData.chartOption.staticDataValue : '123',
      interfaceUrl: this.costomData.chartOption.interfaceURL != '' ? this.costomData.chartOption.interfaceURL : '',
      requestParameters: this.costomData.chartOption.requestParameters != '' ? this.costomData.chartOption.requestParameters : '',
      open: false,
      sortOptions: [{label:'图标', value: 1}, {label:'边框', value: 2}, {label:'按钮', value: 3}],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        type: '1',
        sort: undefined,
        viewTemplate: undefined,
      },
      uploadList: [],
      total: -1,
      loading: false,
      uploadOpen: false,
      uploadForm: {},
      fileList: [],
      aceKey:Math.random(),
      dataOpen:false,
    }
  },
  //页面加载完执行
  mounted() {
    
  },
  computed: {
    noMore () {
      if(this.total != -1) {
        return this.total == this.uploadList.length
      } else {
        return false;
      }
    },
    disabled () {
      return this.loading || this.noMore
    }
  },
  watch: {
    configData: {
      deep: true,
      handler(newVal) {
        // console.log("1=>", newVal);
        this.$emit("costom-change", newVal);
      }
    },
    costomData: {
      deep: true,
      handler(newVal) {
        this.configData = newVal;
        this.staticDataValue = JSON.stringify(newVal.chartOption.staticDataValue);
        this.interfaceUrl = newVal.chartOption.interfaceURL;
        this.requestParameters = newVal.chartOption.requestParameters;
      }
    }
  },
  methods: {
    changeStaticData() {
      //如果是静态数据就给staticDataValue赋值
      if (this.configData.chartOption.isStaticData == true) {
          //this.configData.staticDataValue = JSON.parse(this.staticDataValue);
          this.$set(this.configData.chartOption, 'staticDataValue', JSON.parse(this.staticDataValue));
      } else {
          //this.configData.interfaceURL = this.staticDataValue;
          this.$set(this.configData.chartOption, 'staticDataValue', this.staticDataValue);
      }
    },
    changeInterfaceUrl() {
      this.$set(this.configData.chartOption, 'interfaceURL', this.interfaceUrl);
    },
    changeRequestParameters() {
      this.$set(this.configData.chartOption, 'requestParameters', this.requestParameters);
    },
    openGallery() {
      this.total = -1;
      this.uploadList = [];
      this.queryParams.pageNum = 1;
      this.open = true;
      this.load();
    },
    // 取消按钮
    cancel() {
      this.open = false;
    },
    handleQuery() {
      this.total = -1;
      this.uploadList = [];
      this.queryParams.pageNum = 1;
      this.open = true;
      this.load();
    },
    load () {
      this.loading = true;
      listUpload(this.queryParams).then(response => {
        this.uploadList = this.uploadList.concat(response.rows);
        this.total = response.total;
        this.queryParams.pageNum++;
        this.loading = false;
      });
    },
    selectImg(item) {
      this.$set(this.configData.chartOption.img, 'src', this.basePath +item);
      
      //this.configData.chartOption.border = item;
      this.open = false;
    },
     pageCount (totalnum, limit) {
        return totalnum > 0 ? ((totalnum < limit) ? 1 : ((totalnum % limit) ? (totalnum / limit + 1) : (totalnum / limit))) : 0;
    },
    getInterfaceKey(val){
      this.$set(this.configData.chartOption, 'interfaceKey', val);
    },
    changeApi(val){
      if(val.type == "interfaceUrl"){
        this.$set(this.configData.chartOption, 'interfaceURL', val.arr);
      }else if(val.type == "requestParameters"){
        this.$set(this.configData.chartOption, 'requestParameters', val.arr);
      }else if(val.type == "requestMethod"){
        this.$set(this.configData.chartOption, 'requestMethod', val.arr);
      }else if(val.type == "token"){
        this.$set(this.configData.chartOption, 'token', val.arr);
      }else if(val.type == "timeout"){
        this.$set(this.configData.chartOption, 'timeout', val.arr);
      }
    },
    editData(){
      this.dataOpen = true;
    },
    cancelData(){
      this.dataOpen = false;
    },
    submitData(data){
      this.$set(this.configData.chartOption, 'customData', data);
      this.dataOpen = false;
    }
  }
}
</script>

<style scoped>
/deep/ .center-tabs .el-tabs__item {
    width: 33%;
    text-align: center;
}
.center-tabs .el-tabs__item {
    width: 30% !important;
    text-align: center;
}
.background-images-ul {
    margin-bottom: 20px;
}
.background-images-ul li {
    margin: 2px;
    display: inline-block;
    width: 200px;
    line-height: 25px;
    padding: 20px;
    border: 1px solid #e2e2e2;
    font-size: 14px;
    text-align: center;
    color: #666;
    transition: all .3s;
    -webkit-transition: all .3s;
    cursor: pointer;
}
.border_img {
    width: 160px;
    height: 90px;
    object-fit: contain;
}
.background-images-ul label {
    display: inline-block;
    width: 160px;
    color: #DBEEFF;
    overflow: hidden;
}
</style>